<html>
  <head>
    <title>Watermark Input Prompts</title>
    <link rel="stylesheet" type="text/css" href="../../styles/presentation.css" />
    <link rel="stylesheet" type="text/css" href="ms-help://Hx/HxRuntime/HxLink.css" />
    <script type="text/javascript" src="../../scripts/EventUtilities.js"></script>
    <script type="text/javascript" src="../../scripts/SplitScreen.js"></script>
    <script type="text/javascript" src="../../scripts/Dropdown.js"></script>
    <script type="text/javascript" src="../../scripts/script_loc.js"></script>
    <script type="text/javascript" src="../../scripts/script_manifold.js"></script>
    <script type="text/javascript" src="../../scripts/script_feedBack.js"></script>
    <script type="text/javascript" src="../../scripts/CheckboxMenu.js"></script>
    <script type="text/javascript" src="../../scripts/CommonUtilities.js"></script>
  </head>
  <body>
    <input type="hidden" id="userDataCache" class="userDataStyle" />
    <input type="hidden" id="hiddenScrollOffset" />
    <img id="collapseImage" style="display:none; height:0; width:0;" src="../../icons/collapse_all.gif" title="Collapse image" />
    <img id="expandImage" style="display:none; height:0; width:0;" src="../../icons/expand_all.gif" title="Expand Image" />
    <img id="collapseAllImage" style="display:none; height:0; width:0;" src="../../icons/collapse_all.gif" />
    <img id="expandAllImage" style="display:none; height:0; width:0;" src="../../icons/expand_all.gif" />
    <img id="dropDownImage" style="display:none; height:0; width:0;" src="../../icon/dropdown.gif" />
    <img id="dropDownHoverImage" style="display:none; height:0; width:0;" src="../../icons/dropdownHover.gif" />
    <img id="copyImage" style="display:none; height:0; width:0;" src="../../icons/copycode.gif" title="Copy image" />
    <img id="copyHoverImage" style="display:none; height:0; width:0;" src="../../icons/copycodeHighlight.gif" title="CopyHover image" />
    <div id="header">
      <table id="topTable" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <span onclick="ExpandCollapseAll(toggleAllImage)" style="cursor:default;" onkeypress="ExpandCollapseAll_CheckKey(toggleAllImage, event)" tabindex="0">
              <img ID="toggleAllImage" class="toggleAll" src="../../icons/collapse_all.gif" />
              <label id="collapseAllLabel" for="toggleAllImage" style="display: none;">Collapse All</label>
              <label id="expandAllLabel" for="toggleAllImage" style="display: none;">Expand All</label>
            </span>
          </td>
        </tr>
      </table>
      <table id="bottomTable" cellpadding="0" cellspacing="0">
        <tr id="headerTableRow1">
          <td align="left">
            <span id="runningHeaderText">DevExpress Contrib</span>
          </td>
        </tr>
        <tr id="headerTableRow2">
          <td align="left">
            <span id="nsrTitle">
                  Watermark Input Prompts
               </span>
          </td>
          <td align="center" style="width: 1px; padding: 0px">
            <img src="../../images/DevExContrib 32.png" alt="DevExpress Contrib" />
          </td>
        </tr>
        <tr id="headerTableRow3">
          <td align="left">
            <span id="headfb" class="feedbackhead" />
          </td>
        </tr>
      </table>
      <table id="gradientTable">
        <tr>
          <td class="nsrBottom" background="../../icons/gradient.gif" />
        </tr>
      </table>
    </div>
    <div id="mainSection">
      <div id="mainBody">
        <div class="Content">
          <p>Input Prompt is one of the interface design patterns mentioned in 
          "<a href="http://designinginterfaces.com/Input_Prompt">Designing Interfaces</a>"
          by Jenifer Tidwell. The idea is to "Prefill a text field or dropdown with a prompt that tells
          the user what to do or type." (Tidwell, pg 225)</p>
          <p>One common way to accomplish this is when the edit box is blank some explainitory text is placed
          into the edit box. This text is normally shown in a muted color.</p>
          <p><img src="../../Images/Watermark.gif" width="380" height="303" alt="Watermark"/></p>
          <p>This feature is not supported out of the box with the Developer Express controls. However,
          the Developer Express Support Center supplies the <a href="http://www.devexpress.com/issue=CQ38165">code</a>
          on how to accomplish this task.</p>
          <p>The problem is that for every edit box for which you want an watermark you have to hook up
          three events. The WatermarkInputPromptManager is used to handle these repetative tasks for you.</p>
        </div>
      </div>
      <div id="footer">
        <div class="footerLine">
          <img width="100%" height="3px" src="../../icons/footer.gif" title="Footer image" />
        </div>
        <p />
        <div id="DevLynxVersion">
           <p><small>v2009.0.3332.39062 (2009-02-14  21:42:04)</small></p>
        </div>
        <div id="DevLynxCopyright">
           <p>Copyright &copy; 2008-2009, DevLynx</p>
        </div>
      </div>
    </div>
  </body>
</html>
<!-- @SortOrder 3 -->
